<template>
	<view class="billing-box">
		<view class="">{{ value.billingName }}</view>
		<view class="u-m-t-20">计费类型: {{ filterType(value.billingType) }}</view>
		<view class="u-m-t-20 u-m-b-20">计费备注: {{ value.billingRemark }}</view>
		<!-- 计时计费 -->
		<u-row :gutter="10" v-for="(item, index) in value.detailList"  v-if="value.billingType === 1000" :key="item.id">
			<u-col span="6">每{{ item.detailsTime }}分钟</u-col>
			<u-col span="6">需要花费{{ item.detailsPrice }}元</u-col>
		</u-row>
		<!-- 按功率计费 -->
		<u-row :gutter="10" v-if="value.billingType === 3000" v-for="(item, index) in value.detailList" :key="item.id">
			<u-col span="1">{{ index + 1 }}.</u-col>
			<u-col span="5">{{ item.minPower }}/w~{{ item.maxPower }}/w</u-col>
			<u-col span="3">每{{ item.detailsTime }}分钟</u-col>
			<u-col span="3">{{ item.detailsPrice }}元</u-col>
		</u-row>
		<!-- 免费 -->
		<view class="u-m-t-20" v-if="value.billingType === 4000">计费规则: 免费</view>
	</view>
</template>

<script>
const typeList = [
	{
		name: '计时方案',
		oName: '按时间计费',
		id: 1000
	},
	// {
	// 	name: '计电方案',
	// 	oName: '按电量计费',
	// 	id: 2000
	// },
	{
		name: '计功率方案',
		oName: '按功率计费',
		id: 3000
	},
	{
		name: '免费',
		oName: '不收取费用',
		id: 4000
	}
];

export default {
	props: {
		value: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return { typeList };
	},
	methods: {
		filterType(type) {
			const info = this.typeList.filter(item => item.id == type);
			return info.length > 0 ? info[0].name : '';
		}
	}
};
</script>

<style lang="scss">
.billing-box {
	padding: 20rpx;
	font-size: 26rpx;
}
</style>
